<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- Pager CSS -->
	<link rel="stylesheet" href="__STATIC__/assets/vendor/jquery-pager/Pager.css">
	<link rel="stylesheet" href="__STATIC__/assets/dataview/css/index.css">
	<link rel="stylesheet" href="__STATIC__/assets/dataview/fonts/icomoon.css">
<style type="text/css">
	/*  */
</style>
</head>

<body>
	<!-- MAIN -->
		
	<div class="viewport" >
        <div class="column">
            <!--概览-->
			<div style="margin: 10px 0;position: absolute;top: -30px;">
				<a href="{%:url('Orders/oiList')%}" style="color: #fff;"  target="_BLANK">订单明细 </a>
			</div>
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>{%$order_info['total']%}</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            订单总数
                        </span>
                    </div>
                    <!-- <div class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            季度新增
                        </span>
                    </div> -->
                    <div class="item">
                        <h4>{%$order_info['new_order_total']%} </h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            新增订单
                        </span>
                    </div>
                    <div class="item">
                        <h4>{%$order_info['cancel_order_total']%}</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            取消订单
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">团队订单监控</a>
                        <!-- <a href="javascript:;" data-index="1">新增订单监控</a> -->
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">团队</span>
                            <span class="col">订单总数</span>
                            <span class="col">新增订单</span>
                            <span class="col">取消订单</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
								{%foreach $order_info['rows'] as $vo %} 
								<div class="row">
                                    <span class="col">{%$vo['name']%}</span>
                                    <span class="col">{%$vo['total']%}</span>
                                    <span class="col">{%$vo['new_order_total']%}</span>
                                    <span class="col">{%$vo['cancel_order_total']%}</span>
                                    <span class="icon-dot"></span>
                                </div>
								{%/foreach%}
                                
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    订单数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel" id="app">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter" >
                        <a @click="setTime(1)" href="javascript:;" data-key="day365" :class="{active:timeType == 1}">365天</a>
                        <a @click="setTime(2)" href="javascript:;" data-key="day90" :class="{active:timeType == 2}">90天</a>
                        <a @click="setTime(3)" href="javascript:;" data-key="day30" :class="{active:timeType == 3}">30天</a>
                        <a @click="setTime(4)" href="javascript:;" data-key="day1" :class="{active:timeType == 4}">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div style="width: 50%;">
                            <h4>{{rows.orderNums}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div style="width: 50%;">
                            <h4>{{rows.total}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额(元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    机场
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    商场
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    地铁
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    火车站
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全国热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                LV包 
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                潮牌包
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                潮牌围巾 
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>北京</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>河北</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>江苏</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>山东</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- END MAIN -->
	<div class="clearfix"></div>
	<!-- FOOTER -->

		<!-- END FOOTER -->

	<!-- END WRAPPER -->


	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<!-- <script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script> -->
	
	<!-- <script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script> -->
	<script src="__STATIC__/assets/vendor/vue.js" type="text/javascript"></script>
	<!-- 数据可视化插件 -->
	<script src="__STATIC__/assets/dataview/js/echarts-4.2.1.min.js"></script>
	<script src="__STATIC__/assets/dataview/js/index.js"></script>

	<script src="__STATIC__/assets/dataview/js/china.js"></script>
	<script src="__STATIC__/assets/dataview/js/mymap.js"></script>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				rows: [],
                timeType:1

			},
			created: function(){
				this.getList();
			},
			methods:{
                setTime(timeType){
                    this.timeType = timeType;
                    this.getList();
                },
				getList: function(){

					$.post("{%:url('Index/home')%}?type=" + this.timeType,{},(rsp) => {
                        this.rows = rsp.data;
					},'json')
					
				},
				
			}
		});
		
	</script>
</body>

</html>